import {Menu} from "antd";
import Sider from "antd/es/layout/Sider";
import {MenuConfig} from "../../config";
import * as Icon from '@ant-design/icons'
import React from "react";
import {useSelector} from "react-redux";
import {useNavigate} from "react-router-dom";
import './index.css'
 const ComponentSider =  () =>{
     const collapsed  =  useSelector(state =>state.tab.isCollapse)
     // 动态获取icon
     const creatIconElement = (name) => React.createElement(Icon[name]);
     const menuItem = MenuConfig.map((item)=>{
         const child = {
             key:item.path,
             label: item.label,
             icon:creatIconElement(item.icon),
             children: null
         }
         if(item.children){
             child.children = item.children.map((v)=>{
                 return {
                     key: `${item.path}/${v.path}`,
                     label:v.label
                 }
             })
         }
         return child
     })
     const navigateData = useNavigate()
     const handleMenu = (e:any)=> {
         console.log('e',e)
         navigateData(e.key)
     }

     return <>
         <Sider width={200} collapsed={collapsed} >
             <h3 style={{position:"absolute", top:-65,color:'white',fontSize:20,left:30}}>{collapsed ?'后台' :'后台管理系统'}</h3>
             <Menu
                 mode="inline"
                 defaultSelectedKeys={['1']}
                 defaultOpenKeys={['sub1']}
                 style={{height: '100%', borderRight: 0}}
                 items={menuItem}
                 onClick={handleMenu}
             />
         </Sider>

     </>
 }
export default ComponentSider;